/**
 * App 组件，展示 Vite + React 示例页面
 */

import moduleCss from './app.module.css'
import classNames from 'classnames/bind';
import * as React from "react";
import {HashRouter, Route, Routes, useNavigate} from "react-router-dom";
// 引入模块列表
import modules, {type ModuleInterface} from './modules.ts';
// 引入转换器组件
import Converters from './converters/index.tsx';
import ConvertersPdf2img from './converters/PdfToImg/index.tsx';
import ConvertersWord2Img from './converters/WordToImg/index.tsx';

function Home() {
    const styles = classNames.bind(moduleCss);
    const navigate = useNavigate();
    const [moduleList] = React.useState(modules as ModuleInterface[]);

    const onModulesClick = (app: ModuleInterface) => {
        navigate(app.path);
    }

    return (
        <div className={styles('app-root-container')}>
            {moduleList.filter(it => it.show).map((it) => (
                <div key={it.name} className={styles('app-root-application')} onClick={() => onModulesClick(it)}>
                    <img
                        src={it.icon}
                        alt={it.name}
                        style={{
                            display: 'block',
                            width: '70px',
                            height: '70px',
                        }}/>
                    <span>{it.name}</span>
                </div>
            ))}

            <div className={styles('app-root-license')}>
                <p className={styles('app-root-description')}>
                    这是一个 Electron + React 构建的工具集合, 功能在持续更新中
                </p>
                <p className={styles('app-root-description')}>
                    联系作者: <a href="https://m.tb.cn/h.hZlcSzojRs8JMrO">柠檬市场</a>
                </p>
            </div>
        </div>
    );
}

function App() {
    return (
        <HashRouter>
            <Routes>
                <Route path={'/'} element={<Home/>}/>
                <Route path={'/converters'} element={<Converters/>}>
                    <Route index element={<ConvertersPdf2img/>}/>
                    <Route path={'pdf2img'} element={<ConvertersPdf2img/>}/>
                    <Route path={'word2img'} element={<ConvertersWord2Img/>}/>
                </Route>
            </Routes>
        </HashRouter>
    )
}

export default App;
